<template>
    <view class="section">
        <view class="section-title">
            问题反馈
        </view>
        <view>
            <uni-easyinput type="textarea" maxlength="200" v-model="from.value" placeholder="请写下您的反馈和建议。如果您的被采纳，将会送您一套精美礼品" :styles="{ height: '300rpx' }"></uni-easyinput>
            <view class="word-count">{{ from.value.length }}/200</view>
        </view>
        <view class="btn-wrap">
            <button class="index-title-btn" type="primary" clickable @click="submitForm">提交</button>
        </view>
    </view>
</template>
<script setup>
import { ref } from 'vue'
import { request } from '../utils/request.js'
const from = ref({
    value: ''
})
const submitForm = async() => {
    if (!from.value) {
        uni.showToast({
            title: '请输入内容',
            icon: 'none',
            duration: 3000
        })
        return
    }
    
    await request({
        url: '/user/feedback',
        method: 'POST',
        data: {
            context: from.value.value
        }
    }).then(res => {
        if (res.code === 200) {
            uni.showToast({
                title: '提交成功',
                icon: 'success',
                duration: 3000
            })
            from.value = ''
            setTimeout(() => {
                uni.navigateBack()
            }, 1000)
        } else {
            uni.showToast({
                title: res.data.msg ||res.data.message || '提交失败',
                icon: 'none',
                duration: 3000
            })
        }
    })
}
</script>
<style scoped>
.section {
    padding: 20rpx;
    position: relative;
}
.section-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
}
.btn-wrap {
    margin-top: 30rpx;
    position: fixed;
    bottom: 100rpx;
    left: 50%;
    transform: translateX(-50%)
}
.index-title-btn{
    /* background-color: #2b65f6; */
    background: linear-gradient(to right, #45b5ff, #2b65f6);
    color: #fff;
    border-radius: 10rpx;
    height: 80rpx;
    line-height: 80rpx;
    width: 200px;
}
.word-count{
    position: absolute;
    bottom: 24rpx;
    right: 30rpx;
    text-align: right;
    color: #999;
    font-size: 26rpx;
}
</style>
<style>
.uni-easyinput__content-textarea{
    height: 300rpx !important;
    margin-bottom: 10px !important;
}
</style>